<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style type="text/css">
            html { 
                position: relative;
                border: 1px solid grey; 
                margin: 31px; 
            }
            body { 
                position: relative;
                border: 1px solid gold; 
                margin: 37px; 
            }
            .wrapper {
                position: relative;
                height: 300px;
                border: 1px solid blue;
                margin: 57px;
            }

            .inner {
                position: absolute;
                right: 0;
                top: 0;
                width: 100px;
                height: 50px;
                border: 1px solid red;
                background: rgba(100, 100, 100, 0.5);
            }
        </style>
    </head>
    <body>

        <h3>绝对定位</h3>
        <p>当元素的定位方式为`absolute`时即为绝对定位</p>
        <p>其二：元素相对于它本身最近的、已定位的父元素的边界进行定位</p>

        <div class="wrapper">
            <b>老大</b>
            <div class="inner">老二</div>
            <span>老三</span>
        </div>

    </body>
</html>